<template>
  <div>
    <van-nav-bar
      title="监管力量"
      left-text=""
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div class="title" @click="poweraddhandle">
      <van-icon name="manager" />
      添加新力量
    </div>
    <div class="poweruser">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="街道网格" name="1">
          <div
            class="grid-item"
            v-for="(item, index) in grid"
            :key="index"
            @click="itemhandle(item)"
          >
            <van-radio-group v-model="radioJd">
              <van-radio :name="index">
                <b>{{ item.name }} </b>
                <span>联系方式：{{ item.mobile }}</span>
              </van-radio>
            </van-radio-group>
          </div>
        </van-collapse-item>
        <van-collapse-item title="城管执法" name="2">
          <div
            class="grid-item"
            v-for="(item, index) in cgzf"
            :key="index"
            @click="itemhandle(item)"
          >
            <van-radio-group v-model="radioCg">
              <van-radio :name="index">
                <b>{{ item.name }} </b>
                <span>联系方式：{{ item.mobile }}</span>
              </van-radio>
            </van-radio-group>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <van-popup
      v-model="popupshow"
      round
      @close="pcolsehandle"
      position="bottom"
      :style="{ height: '270px' }"
    >
      <div class="func">
        <p class="func-t">用户管理操作</p>
        <p class="desc">对选中用户进行权限管理，用户信息修改或者 删除操作</p>
        <p class="qxgl" @click="qxglhandle">用户权限管理</p>
        <p class="xxxg" @click="xghandle">用户信息修改</p>
        <p class="del" @click="delhandle">删除</p>
        <p class="cancel" @click="cancelhandle">取消</p>
      </div>
    </van-popup>
    <van-popup
      v-model="popup2show"
      round
      position="bottom"
      :style="{ height: '240px' }"
    >
      <div class="changeform">
        <div class="cformt">用户信息修改</div>
        <van-form>
        <!-- <van-form @submit="onSubmit"> -->
          <van-field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="mobile"
            name="联系方式"
            label="联系方式"
            placeholder="联系方式"
            :rules="[{ required: true, message: '请填写联系方式' }]"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="dept"
            label="部门"
            placeholder="街道网格"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <div class="dform">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              color="linear-gradient(90deg, #00C4C6 0%, #01DC8E 100%)"
              @click="xgConfirm"
              >确认</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import { powerDelete,powerUserList,powerInfo,powerGetManageUser } from '../../../utils/api'
export default {
  name: "regulatoryPower",
  data() {
    return {
      activeNames: ["1",'2'],
      radioJd: '-1',
      radioCg: '-1',
      popupshow: false,
      popup2show: false,
      username: "",
      mobile: "",
      dept: "",
      showPicker: false,
      columns: ["街道网格", "城管执法"],
      grid: [
        // {
        //   id: "1",
        //   name: "张三四",
        //   mobile: "17789765645",
        //   type:'街道网格'
        // },
        // {
        //   id: "2",
        //   name: "李四",
        //   mobile: "17789765645",
        //   type:'街道网格'
        // },
      ],
      cgzf: [
        // {
        //   id: "3",
        //   name: "张五",
        //   tel: "17789765645",
        //   type:'城管执法'
        // },
        // {
        //   id: "4",
        //   name: "李六",
        //   tel: "17789765645",
        //   type:'城管执法'
        // },
      ],
      datas:'',
      copyUserId:''
    };
  },
  mounted() {
    powerUserList().then((res)=>{
      if(res.code == 200){
        //城管执法
        this.cgzf = res.data.law;
        //街道网格
        this.grid = res.data.street_grid
      }else{
        Toast(res.message)
      }
    })
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/" });
    },
    itemhandle(val) {
      this.copyUserId = null;
      this.popupshow = true;
      this.datas = null;
      this.datas = val;
    },
    cancelhandle() {
      this.popupshow = false;
      this.radioJd = -1;
      this.radioCg = -1;
    },
    //用户信息修改确认
    xgConfirm(val){
      let params = {
        mobile:this.mobile,
        name:this.username,
        part:this.part = this.part == '城管执法'?'law':'street_grid',
        partName:this.part,
        userid:this.datas.userid,
      }
      powerInfo(params).then((res)=>{
        if(res.code === 200){
          Toast.success("修改成功");
        }else{
          Toast.fail(res.message);
        }
      })
    },
    //用户信息修改
    xghandle() {
      this.popupshow = false;
      this.popup2show = true;
    },
    onConfirm(value) {
      this.dept = value;
      this.showPicker = false;
    },
    //删除用户
    delhandle() {
      let that = this;
      Dialog.confirm({
        message: "确认删除？",
        theme: "round-button",
      }).then(() => {
        that.popupshow = false;
        if(that.datas.part == 'law'){
          that.cgzf.forEach((value,index,array)=>{
            if(value.id ==that.datas.id){
              array.splice(value,1)
            }
          })
        }else{
          that.grid.forEach((value,index,array)=>{
            if(value.id ==that.datas.id){
              array.splice(value,1)
            }
          })
        }
        let parmas = {
          id:that.datas.id
        }
        powerDelete(parmas).then((res)=>{
          if(res.code === 200){
            Toast.success("删除成功");
          }else{
            Toast.success(res.message);
          }
        })

      });
    },
    //权限管理用户
    qxglhandle() {
      let that = this;
      let params = {
        userid:this.datas.userid
      }
      powerGetManageUser(params).then((res)=>{
        if(res.code === 200){
          let datas = res.data;
          that.$router.push({name:'permSetting',params: {detail:datas}});
        }
      })
    },
    pcolsehandle(val) {
      this.radio = -1;
    },
    poweraddhandle(){
       this.$router.push({ path: "/regulatoryPower/powerAdd" });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #daf4f1;
  color: #04bfac;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 46px;
  padding-left: 20px;
  box-sizing: border-box;
}
.grid-item {
  width: 100%;
  padding: 15px 0px;
  border-bottom: 1px #f5f5f5 solid;
}
.grid-item b {
  padding-right: 40px;
  padding-left: 10px;
}
.grid-item span {
  color: #6e6e6e;
  font-weight: bold;
}
.grid-item:last-child {
  border: none;
}
.func {
  width: 75%;
  margin: auto;
  text-align: center;
}

.func .func-t {
  font-size: 15px;
  font-weight: bold;
}
.func .qxgl {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #04bfac;
}
.func .xxxg {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #04bfac;
}
.func .del {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #f57665;
}
.func .cancel {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #999999;
}
.changeform {
  margin-top: 10px;
}
.dform {
  width: 90%;
  margin: 10px auto;
}
.cformt {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}
</style>
